<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<!-- 设置页面的 基本路径，页面所有资源引入和页面的跳转全部基于 base路径 -->
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">

<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script> 


</head>

<button onclick="getCheckedData();">获取选中的节点的数据</button>
<!-- zTree列表-->
<ul id="permissionTree" class="ztree"></ul>




<script type="text/javascript">
/* zTree的设置对象  */
var setting = {	
		/* 异步加载数据 */
		async: {
			enable: true,
			url:"permission/getAllPermission.do",
			/* 数据过滤 （对ajax返回数据预处理）,zTree渲染效果之前 */
			dataFilter: ajaxDataFilter 
		},
		data: {
			/* 设置支持简单数据 */
			simpleData: {
				enable: true,
				idKey:"permissionId",
				pIdKey:"parentId"
					
			}
		},
		/* 设置显示复选框 */
		check: {
			enable: true
		},
		/* 异步的回调 */
		callback: {
			/* 异步加载成功回调 */
			onAsyncSuccess: zTreeOnAsyncSuccess
		}
		
	};
	
	/* 异步加载成功回调函数 */
	function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
	   /* 
	   		数据回显思路
	   		1,将后台共享的角色权限id切割成数组
	   		var permissionIds = "58,31,35,32,33,34";
	   		var permissionIdsArr = permissionIds.split(",");
	   		2,循环权限id，选中这些权限id对应的节点
	   			（zTree树插件拥有根据属性的值获取节点的方法，根据节点permissionId属性获取对应的节点）
	   		3，让其对应的节点复选框选中即可		
	   */
	   
		var permissionIds = "58,31,35,32,33,34";
   		var permissionIdsArr = permissionIds.split(",");
   		
   		//获取树对象
   		var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
   		
   		for(var i = 0;i<permissionIdsArr.length;i++){
   			
   			//获取每一个权限id
   			var permissionId = permissionIdsArr[i];
   			
   			//通过节点的permissionId数据属性获取对应的节点
   			var node = treeObj.getNodeByParam("permissionId", permissionId, null);
   			
   			console.log(node);
   			
   			//让其对应的节点选中
   			treeObj.checkNode(node, true, false);
   			
   		}
	};
	

	/* 预处理数据函数 */
	function ajaxDataFilter(treeId, parentNode, responseData) {
	    if (responseData) {
	      for(var i =0; i < responseData.length; i++) {
			//清空url地址，防止点击跳转
			responseData[i].url = null;
			responseData[i].open = true;
	      }
	    }
	    return responseData;
	};

	/* 初始化zTree */
	$(function(){
		$.fn.zTree.init($("#permissionTree"), setting);
	});
	
	
	
	/* 获取选中的节点的数据 */
	function getCheckedData(){
		//获取zTree树对象： 没有# ，不是jquery的id选择器
		var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
		//获取选中的节点
		var nodes = treeObj.getCheckedNodes(true);
		
		//声明数组用于封装权限id
		var permissionIdsArr = [];
		//循环节点
		for(var i = 0 ;i<nodes.length;i++){
			var node = nodes[i];
			
			permissionIdsArr.push(node.permissionId);
		}
		
		console.log(permissionIdsArr)
		//var permissionIds = permissionIdsArr.toString();
		var permissionIds = permissionIdsArr.join(",");
		console.log(permissionIds);
	}
	
	
	
</script>



<body>

</body>
</html>